<template>
	<div class="user-wrap">

		<mu-appbar style="width: 100%;" :color="'rgba(244,67,54,'+ appbarbg +')'" z-depth="0">
			<mu-button icon slot="left" @click.native="$router.go(-1)">
				<mu-icon value="chevron_left"></mu-icon>
			</mu-button>
			<span slot="default">{{profile.nickname}}</span>
			<mu-button icon slot="right">
				<!-- <mu-icon value="menu"></mu-icon> -->
			</mu-button>
		</mu-appbar>

		<my-scroll :data="my_created_playlist" :listenScroll="true" @scroll="scroll">
			
			<div class="user-header" ref="userHeader">
				<div class="user-bg img_bg">
					<img :src="profile.backgroundUrl" alt="" class="img_auto">
					<div class="mask"></div>
				</div>
				<div class="user-head">
					<div class="user-data">
						<mu-avatar size="65" class="avatar">
							<img :src="profile.avatarUrl">
						</mu-avatar>
						<div class="user-main">
							<h3>{{ profile.nickname }} </h3>
							<p>{{ profile.signature }}</p>
						</div>
					</div>
					<div class="daily-signin">
						<mu-button color="red" @click="daily_signin" :disabled="Boolean(signin_flag)" data-mu-loading-color="secondary" v-loading="loadflag.signin">
							<mu-icon left value="filter_list"></mu-icon>
							{{ signin_flag ? '已签到' : '签到' }}
						</mu-button>
						
					</div>
				</div>
			</div>
			
			<section class="user-playlist">
				<mu-expansion-panel :expand="my_like_playlist.length > 0 ? true : false">
					<div slot="header">我创建的歌单（{{my_created_playlist.length}}）</div>
					<section slot="default">
						<mu-list data-mu-loading-color="secondary" v-loading="loadflag.created">
							<mu-list-item avatar v-for="item,key in my_created_playlist" :key="key" :to="'/sheets/details/'+item.id">
								<mu-list-item-action avatar>
									<mu-avatar>
										<img :src="item.coverImgUrl">
									</mu-avatar>
								</mu-list-item-action>
								<mu-list-item-content>
									<mu-list-item-title>{{ item.name }}</mu-list-item-title>
								</mu-list-item-content>
							</mu-list-item>
						</mu-list>
					</section>
				</mu-expansion-panel>
				<mu-expansion-panel :expand="my_like_playlist.length  > 0 ? true : false ">
					<div slot="header">我收藏的歌单（{{my_like_playlist.length}}）</div>
					<section slot="default">
						<mu-list data-mu-loading-color="secondary" v-loading="loadflag.like">
							<mu-list-item avatar v-for="item,key in my_like_playlist" :key="key" :to="'/sheets/details/'+item.id">
								<mu-list-item-action avatar>
									<mu-avatar>
										<img :src="item.coverImgUrl">
									</mu-avatar>
								</mu-list-item-action>
								<mu-list-item-content>
									<mu-list-item-title>{{ item.name }}</mu-list-item-title>
								</mu-list-item-content>
							</mu-list-item>
						</mu-list>
					</section>
				</mu-expansion-panel>
			</section>
				

			<div class="p-10">
				<mu-button full-width color="error" large @click="handlerLogout">退出</mu-button>
			</div>
		</my-scroll>

	</div>
</template>

<script>
	let HEAD_HEIGHT;
	import {mapGetters} from 'vuex';
	export default{
		data(){
			return{
				signin_flag: false,
				loadflag: {
					signin: false,
					created: false,
					like: false,
				},
				my_created_playlist: [],
				my_like_playlist: [],

				appbarbg: 0,
			}
		},
		created(){
			this.profile = this._get_profile.profile;
		},
		mounted(){
			this._get_signin_status();
			this._get_login_status();

			this.$nextTick(()=>{
				HEAD_HEIGHT = this.$refs.userHeader.clientHeight;
				this._get_user_playlist();
			})
			// console.log(this._get_profile)
		},
		computed:{
			...mapGetters([
			 	//此处的 play_mode 与以下 store.js 文件中 getters 内的 play_mode 相对应
			 	'_get_profile'
			])
		},
		methods:{
			_get_login_status(){
				this.$api.get(this.ApiPath.user.detail,{
					uid: this.profile.userId
				},success=>{
					console.log(success)
				})
			},
			_get_user_playlist(){
				this.loadflag.created = this.loadflag.like = true;
				this.$api.get(this.ApiPath.user.playlist,{
					uid: this.profile.userId
				},success=>{
					success.data.playlist.map(res=>{
						// this.my_created_playlist.push(res)
						res.userId == this.profile.userId ? this.my_created_playlist.push(res) : this.my_like_playlist.push(res);
					});
					this.loadflag.created = this.loadflag.like = false;
				})
			},
			_get_signin_status(){
				this.signin_flag = this.$utils.getCookie('signin_flag_'+this.profile.userId) || this.signin_flag;
			},
			daily_signin(){
				if(!this.signin_flag){
					var overdue = this.$utils.endingToday(new Date().getTime());
					this.loadflag.signin = true;
					this.$api.get(this.ApiPath.signin,{},success=>{
						this.$alert(success.data.msg);
						this.signin_flag = true;
						this.loadflag.signin = false;
						this.$utils.setCookie('signin_flag_'+this.profile.userId,this.signin_flag, overdue);
					},err=>{
						this.$alert(err.data.msg);
						this.signin_flag = true;
						this.loadflag.signin = false;
						this.$utils.setCookie('signin_flag_'+this.profile.userId,this.signin_flag, overdue);
					});
				}
			},

			handlerLogout(){
				this.$api.get(this.ApiPath.logout,{},success=>{
					this.$alert('退出成功').then(()=>{
						this.$router.push('/login');
						this.$store.commit('_set_profile',{});
					});
				})
			},

			scroll(pos){
				var posy =  pos.y < -HEAD_HEIGHT ? HEAD_HEIGHT : -pos.y;
				this.appbarbg = posy * 0.95 / HEAD_HEIGHT;
				console.log( posy )
				// console.log(pos.y / 190)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/style/base/_color.scss';
	.user-wrap{
		height: 100%;
	}
	.user-playlist{
		.mu-paper{
			background: $_body;
		}
	}
	.user-header{
		position: relative;
		height: 12rem;
		.user-bg{
			overflow: hidden;
			
		}
		.user-head{
			padding: 10px 20px;
			position: absolute;
			left: 0; right: 0;
			top: 0; bottom: 0;
			z-index: 2;
			display: flex;
			align-items: center;
			color: white;
			.user-data{
				flex: 4;
				text-align: left;
				font-size: 0;
				/*display: flex;*/
				/*flex*/
				/*align-items: center;*/
				.avatar{
					margin-right: 15px;
					display: inline-block;
					vertical-align: middle;
				}
				.user-main{
					vertical-align: middle;
					display: inline-block;
					width: calc(100% - 80px);
					p{
						font-size: 13px;
						opacity: .7;
					}
					h3{
						margin-bottom: 5px;
						font-size: 16px;
					}
				}
			}
			.daily-signin{
				flex: 1;
			}
		}
	}
	/deep/.mu-raised-button .mu-button-wrapper{
		/*border: 1px solid $red;*/
		/*background-color: $red;*/
		border-radius: 5px;
		padding: 0;
	}


	.mu-appbar{
		position: fixed;
		top: 0;
		left: 0; right: 0;
		z-index: 101;
	}
	.scroll_wrap{
		z-index: 1;
		position: relative;
	}
</style>